<template>
  <div class="home">
    <el-alert :closable="false" type="success" style="margin-bottom: 40px;">
      <el-select v-model="province" placeholder="请选择省份" @change="changeProvince">
        <el-option
            v-for="item in provinceData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-alert>
    <div class="ech" style="width: 1250px;display: flex;justify-content:space-between;flex-wrap: wrap;margin: 0 auto;">
      <div id="main" style="height:600px;width:500px;"></div>
      <div id="mainT" style="height:500px;width:700px;"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
import * as echarts from "echarts"
import provinceData from "../assets/province";

export default {
  name: 'Home',
  data() {
    return {
      provinceData: provinceData,
      province: "北京"
    }
  },
  mounted() {
    this.changeProvince()
  },
  methods: {
    changeProvince() {
      this.initChart();
      this.initChartT();
    },
    //饼状图
    initChart() {
      let myChart = echarts.init(document.getElementById('main'));
      let arr = []
      axios.get('https://api.inews.qq.com/newsqa/v1/query/pubished/daily/list?province=' + this.province).then(res => {
        let allData = res.data.data.slice(0, 20)
        allData.forEach(item => {
          arr.push({value: item.confirm_add, name: item.date})
        })
        let options = {
          title: {
            text: `新冠病毒每日新增情况（饼状图） ${this.province}`,
            subtext: '2020年1月27日~2020年2月15日',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{a} <br/>{c}人 ({d}%)'
          },
          toolbox: {
            saveAsImage: {}
          },
          series: [
            {
              name: '相比昨日新增：',
              type: 'pie',    // 设置图表类型为饼图
              radius: '70%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
              center: ['50%', '50%'],
              data: arr.sort(function (a, b) {
                return a.value - b.value;
              }),
              roseType: 'radius',
              animationType: 'scale',
            }
          ]
        }
        myChart.setOption(options)
      }).catch(err => {
        console.log(err);
      })
    },
    /*条形图*/
    initChartT() {
      //时间轴
      let XAxis = []
      // 新增
      let YAxis = []
      //已确诊
      let confirmY = []
      //死亡
      let deadY = []
      //治愈
      let healY = []
      let chart = echarts.init(document.getElementById("mainT"));
      axios.get('https://api.inews.qq.com/newsqa/v1/query/pubished/daily/list?province=' + this.province).then(res => {
        let allData = res.data.data
        console.log(allData);
        allData.forEach(item => {
          XAxis.push(item.date)
          //新增
          YAxis.push(item.confirm_add)
          //确诊
          confirmY.push(item.confirm)
          //死亡
          deadY.push(item.dead)
          //治愈
          healY.push(item.heal)
        })
        let nowTime = new Date()
        let Year = nowTime.getFullYear();
        let Mouth = nowTime.getMonth() + 1;
        let Day = nowTime.getDate();
        let options = {
          title: {
            text: '新冠病毒每日新增情况（折线图）' + this.province,
            subtext: `2020年1月27日~${Year}年${Mouth}月${Day}日`,
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            data: ["新增", "确诊", "死亡", "治愈"]
          },
          toolbox: {
            feature: {
              magicType: {
                show: true,
                type: ['bar', 'line']
              },
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: XAxis
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '新增病例',
              stack: '新增病例',
              data: YAxis,
              type: 'line'
            },
            {
              name: '确诊病例',
              stack: '确诊病例',
              data: confirmY,
              type: 'line'
            },
            {
              name: '死亡病例',
              stack: '死亡病例',
              data: deadY,
              type: 'line'
            },
            {
              name: '治愈病例',
              stack: '治愈病例',
              data: healY,
              type: 'line'
            }
          ]
        };
        chart.setOption(options)
      }).catch(err => {
        console.log(err);
      })
    },
  }
}
</script>
